<template>
	<view>
		<view class="bankcard-top">
			<text>我的结算卡（共{{dataList.length}}张）</text>
			<text @tap="addBankCardAction">+添加结算卡</text>
		</view>
		<view class="bankcard-list">
			<view class="bankcard-item" v-for="item in dataList" :key="item.id" @tap="showDetailAction(item)">
				<image class="bankcard-item-logo" :src="item.bankPicUrl" mode="aspectFit"></image>
				<view class="bankcard-item-info">
					<text>{{item.bankName}}</text>
					<text>储蓄卡</text>
					<text>{{formatBankCardNoAction(item)}}</text>
				</view>
				<text class="bankcard-item-default" v-if="item.useFlag == '1'">默认</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getBankCardList } from '@/config/api.js'

	const dataList = ref([])

	onShow(() => {
		getBankCardListData()
	})
	//获取结算卡列表
	const getBankCardListData = () => {
		getBankCardList().then(res => {
			dataList.value = res.result
		}).catch(err => {})
	}
	//格式化银行卡号
	const formatBankCardNoAction = (item) => {
		return uni.$tools.formatBankCardNo(item.cardNo)
	}
	//查看结算卡详情
	const showDetailAction = (item) => {
		uni.$u.route({
			url: 'pages/home/bankcard-info/bankcard-info',
			params: item
		})
	}
	//添加结算卡
	const addBankCardAction = ()=>{
		uni.navigateTo({
			url:'/pages/auth/bankcard/bankcard?type=add'
		})
	}
	
</script>

<style lang="scss" scoped>
	.bankcard-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		font-size: 28rpx;
		color: $xh-title-color;

		text:nth-child(1) {
			color: $xh-subtitle-color;
		}
	}

	.bankcard-list {
		padding: 0 30rpx;
		box-sizing: border-box;

		.bankcard-item {
			background-color: white;
			border-radius: 16rpx;
			padding: 20rpx;
			display: flex;
			color: $xh-title-color;
			margin-bottom: 30rpx;

			.bankcard-item-logo {
				width: 78rpx;
				height: 78rpx;
			}

			.bankcard-item-info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				flex: 1;

				text:nth-child(1) {
					font-size: 32rpx;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					margin: 10rpx 0;
				}

				text:nth-child(3) {
					font-size: 28rpx;
				}
			}

			.bankcard-item-default {
				font-size: 24rpx;
			}
		}
	}
</style>